<template>
  <div v-loading.fullscreen.lock="loading" class="cltk">
    <div class="page-header">
      <p>查看答题详情</p>
      <div class="page-header-back" @click="$router.back()">退出</div>
    </div>

    <div class="container">
      <div class="container-left">
        <div class="image-box" ref="imageBox">
          <div
            v-if="tableData[tableActiceIndex]"
            class="frame-box"
            :style="`transform: scale(${imageScale})`"
          >
            <img
              ref="image"
              class="image"
              :class="{ hidden: !imageScale }"
              :style="`transform:rotate(${rotate}deg);width:${
                teampleData[imgType == 'frontImgPath' ? 0 : 1][
                  rotate == 90 || rotate == 270 ? 'height' : 'width'
                ]
              }px;
              height:${
                teampleData[imgType == 'frontImgPath' ? 0 : 1][
                  rotate == 90 || rotate == 270 ? 'width' : 'height'
                ]
              }px;`"
              :src="imgUrl"
              alt=""
              @load="imgload"
            />

            <template v-if="qtyl">
              <div
                class="frame-item"
                v-for="item in frame"
                :key="item.id"
                :style="`width:${item.width}px;height:${item.height}px;top:${item.y}px;left:${item.x}px`"
              ></div>
            </template>
          </div>
        </div>

        <div class="left-btn-box">
          <div
            :class="{ active: imgType == 'frontImgPath' }"
            @click="setImgType('frontImgPath')"
          >
            1
          </div>
          <div
            :class="{ active: imgType == 'backImgPath' }"
            @click="setImgType('backImgPath')"
          >
            2
          </div>
        </div>
      </div>
      <div class="container-right">
        <div class="right-title">
          <p>处理列表</p>
          <div>
            切图预览
            <el-switch
              v-model="qtyl"
              active-color="#1890ff"
              @change="qtylChange"
            >
            </el-switch>
          </div>
        </div>

        <div class="table-data">
          <el-collapse
            v-model="tableActiceIndex"
            accordion
            @change="tableActiceChange"
          >
            <el-collapse-item
              v-for="(item, index) in tableData"
              :key="item.id"
              :title="`${item.admissionNo}（${item.studentName}）`"
              :name="index"
            >
              <div class="table-item">
                <div class="table-item-content">
                  <div>
                    <p><span>题卡科目：</span></p>
                    <p>
                      <span>上传时间：</span>{{ formatDate(item.updateTime) }}
                    </p>
                    <p><span>异常状态：</span>{{ ycztFilter(item) }}</p>
                  </div>
                  <div class="table-item-btnbox">
                    <el-button type="danger" @click="del(item.id)"
                      >删除题卡</el-button
                    >
                    <el-button type="primary" @click="submit"
                      >提交更改</el-button
                    >
                  </div>
                </div>
                <div class="table-item-bottom-btnbox">
                  <div>
                    <p
                      class="table-item-btn"
                      v-if="item.releasePassCard == '0' && item.passCard == '1'"
                      :class="{ active: item.pass }"
                      @click="setPass"
                    >
                      释放
                    </p>
                    <p
                      class="table-item-btn no-btn"
                      v-if="item.releasePassCard == '1' && item.passCard == '1'"
                    >
                      已释放题卡
                    </p>
                    <p
                      class="table-item-btn"
                      :class="{ active: item.switching }"
                      @click="setSwitching"
                    >
                      题卡顺序切换
                    </p>
                    <p class="table-item-btn" style="visibility: hidden"></p>
                  </div>
                  <div>
                    <p class="table-item-btn" @click="setRotate(180)">
                      翻转180°
                    </p>
                    <p class="table-item-btn" @click="setRotate(90)">
                      顺时针90°旋转
                    </p>
                    <p class="table-item-btn" @click="setRotate(270)">
                      逆时针90°旋转
                    </p>
                  </div>
                </div>
              </div>
            </el-collapse-item>
          </el-collapse>
        </div>
        <div class="pagination">
          <pagination
            v-show="total > 0 && !$route.query.ids"
            :total="total"
            :page.sync="pageNum"
            :limit.sync="pageSize"
            @pagination="getList"
            :pagerCount="5"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { formatDate } from "@/utils";
import {
  scanQuestionCardSaveScanDetails,
  scanQuestionCardSelectAbnormal,
} from "@/api/xmgl/tkcx";
import { scanRecognitionRecord, scanDel } from "@/api/xmgl/smgl";
import { teampleHW } from "@/api/common";
export default {
  data() {
    return {
      loading: false,
      xmxx: {},
      tableData: [],
      tableActiceIndex: 0,

      qtyl: false,

      pageNum: 1,
      total: 0,
      pageSize: 15,
      formatDate: formatDate,

      imgType: "frontImgPath",
      imgUrl: "",
      imageScale: "",
      imageHidden: true,
      frame: [],
      teampleData: null,
    };
  },
  computed: {
    rotate: function () {
      if (this.imgType == "frontImgPath") {
        return this.tableData[this.tableActiceIndex].rotate1;
      } else {
        return this.tableData[this.tableActiceIndex].rotate2;
      }
    },
  },
  created() {
    this.loading = true;
    teampleHW({
      templateId: this.$route.query.templateId,
    }).then((res) => {
      this.teampleData = res.data;
      this.getList();
    });
  },
  methods: {
    getList() {
      this.loading = true;
      this.tableData = [];
      let data = {
        examId: this.$route.query.examId,
        examSubjectId: this.$route.query.examSubjectId,
        examSchoolId: this.$route.query.examSchoolId
          ? [this.$route.query.examSchoolId]
          : [],
        pageNum: this.pageNum,
        pageSize: this.pageSize,
      };
      if (this.$route.query.tkzt) {
        data.examScanDetails = {};
        data.examScanDetails[this.$route.query.tkzt] = 1;
      }
      if (this.$route.query.ids) {
        data.ids = this.$route.query.ids.split(",").map((item) => {
          return Number(item);
        });
        data.pageSize = data.ids.length;
      }
      scanRecognitionRecord(data)
        .then((response) => {
          this.total = response.data.total;
          this.tableData = response.data.records.map((item) => {
            return {
              ...item,
              rotate1: 0,
              rotate2: 0,
              switching: false,
              pass: false,
            };
          });
          this.tableActiceChange(0);
        })
        .finally(() => {
          this.loading = false;
        });
    },

    ycztFilter(item) {
      if (item.abnormalOption == 1 && item.passCard == 1) {
        return "选项异常,后传题卡";
      } else if (item.abnormalOption == 1) {
        return "选项异常";
      } else if (item.passCard == 1) {
        return "后传题卡";
      } else {
        return "";
      }
    },
    imgload() {
      let wScale;
      let hScale;

      wScale = this.$refs.imageBox.offsetWidth / this.$refs.image.offsetWidth;
      hScale = this.$refs.imageBox.offsetHeight / this.$refs.image.offsetHeight;

      this.imageScale = wScale > hScale ? hScale : wScale;
    },
    tableActiceChange(index) {
      this.imageScale = "";
      this.frame = [];
      if (index !== "") {
        this.imgUrl =
          this.tableData[index][this.imgType] + `?${new Date().getTime()}`;
        if (this.qtyl) {
          this.getFrame();
        }
      } else {
        this.imgUrl = "";
      }
    },
    qtylChange(value) {
      if (value) {
        this.getFrame();
      }
    },
    getFrame() {
      scanQuestionCardSelectAbnormal({
        id: this.tableData[this.tableActiceIndex].id,
        templateId: this.tableData[this.tableActiceIndex].templateId,
        page: this.imgType == "frontImgPath" ? 1 : 2,
      }).then((res) => {
        this.frame = res.data;
      });
    },
    setImgType(type) {
      this.imgType = type;
      this.tableActiceChange(this.tableActiceIndex);
    },
    setRotate(n) {
      if (this.imgType == "frontImgPath") {
        this.tableData[this.tableActiceIndex].rotate1 =
          (this.tableData[this.tableActiceIndex].rotate1 + n) % 360;
      } else {
        this.tableData[this.tableActiceIndex].rotate2 =
          (this.tableData[this.tableActiceIndex].rotate2 + n) % 360;
      }
      this.$nextTick(() => {
        this.imgload();
      });
    },
    setPass() {
      this.tableData[this.tableActiceIndex].pass =
        !this.tableData[this.tableActiceIndex].pass;
    },
    setSwitching() {
      let frontImgPath = this.tableData[this.tableActiceIndex].frontImgPath;
      let backImgPath = this.tableData[this.tableActiceIndex].backImgPath;

      let minFrontImgPath =
        this.tableData[this.tableActiceIndex].minFrontImgPath;
      let minBackImgPath = this.tableData[this.tableActiceIndex].minBackImgPath;

      this.tableData[this.tableActiceIndex].frontImgPath = backImgPath;
      this.tableData[this.tableActiceIndex].backImgPath = frontImgPath;

      this.tableData[this.tableActiceIndex].minFrontImgPath = minBackImgPath;
      this.tableData[this.tableActiceIndex].minBackImgPath = minFrontImgPath;

      this.tableData[this.tableActiceIndex].switching =
        !this.tableData[this.tableActiceIndex].switching;
      this.tableActiceChange(this.tableActiceIndex);
    },
    del(id) {
      this.$modal.confirm("请确认进行删除操作").then(() => {
        scanDel({ ids: [id] }).then((res) => {
          this.$modal.msgSuccess("操作成功");
          this.getList();
        });
      });
    },
    submit() {
      this.$modal.confirm("请确认进行提交操作").then(() => {
        let data = {
          id: this.tableData[this.tableActiceIndex].id,
          templateId: this.tableData[this.tableActiceIndex].templateId,
          frontImgPath: this.tableData[this.tableActiceIndex].frontImgPath,
          backImgPath: this.tableData[this.tableActiceIndex].backImgPath,
          minFrontImgPath:
            this.tableData[this.tableActiceIndex].minFrontImgPath,
          minBackImgPath: this.tableData[this.tableActiceIndex].minBackImgPath,
          releasePassCard: this.tableData[this.tableActiceIndex].pass ? 1 : 0,
          clockwiseOne: 0,
          clockwiseTwo: 0,
          degreesOne: this.tableData[this.tableActiceIndex].rotate1,
          degreesTwo: this.tableData[this.tableActiceIndex].rotate2,
          pageOne: null,
          pageTwo: null,
        };
        if (data.degreesOne > 0) {
          data.pageOne = 1;
        }
        if (data.degreesTwo > 0) {
          data.pageTwo = 2;
        }
        this.loading = true;
        scanQuestionCardSaveScanDetails(data).then((res) => {
          this.$modal.msgSuccess("操作成功");
          this.getList();
        });
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.page-header {
  height: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #ffffff;
  background: #1a48db;
  font-size: 16px;
  padding: 0 24px 0 44px;

  p {
    margin: 0;
  }

  .page-header-back {
    width: 76px;
    height: 32px;
    background: #ffffff;
    border-radius: 16px;
    line-height: 32px;
    text-align: center;
    color: #1a48db;
    font-size: 16px;
    cursor: pointer;

    &:active {
      opacity: 0.8;
    }
  }
}

.container {
  height: calc(100vh - 50px);
  display: flex;

  .container-left {
    width: calc(100vw - 460px);
    height: 100%;
    padding: 20px 20px 80px 20px;
    box-sizing: border-box;
    position: relative;
    .image-box {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      overflow: hidden;
      .image.hidden {
        visibility: hidden;
      }

      .frame-box {
        position: relative;

        .frame-item {
          border: 3px solid #288f41;
          position: absolute;
        }
      }
    }
    .left-btn-box {
      position: absolute;
      left: 20px;
      bottom: 20px;
      display: flex;
      div {
        width: 32px;
        height: 32px;
        line-height: 32px;
        font-size: 14px;
        text-align: center;
        border: 1px solid #dee1e7;
        margin-right: 14px;
        cursor: pointer;

        &.active {
          color: #ffffff;
          background: #1a48db;
          border-color: #1a48db;
        }
      }
    }
  }

  .container-right {
    width: 460px;
    height: 100%;
    background: #ffffff;
    box-sizing: border-box;
    overflow: auto;
    .right-title {
      padding: 0 20px;
      height: 66px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 14px;
      color: #5b6371;
      line-height: 66px;
      p {
        font-size: 18px;
        color: #2a303b;
        font-weight: bold;
        margin: 0;
      }
    }

    .table-data {
      height: calc(100% - 118px);
      overflow: auto;
      .table-item {
        height: 278px;
        background: #e8f0fa;
        padding: 20px;
        box-sizing: border-box;

        .table-item-content {
          display: flex;
          justify-content: space-between;

          p {
            font-size: 16px;
            color: #5b6371;
            line-height: 16px;
            & + p {
              margin-top: 14px;
            }
            span {
              color: #8e96a4;
            }
          }
          .table-item-btnbox {
            width: 100px;
            .el-button {
              margin: 0;
              margin-bottom: 10px;
            }
          }
        }

        .table-item-bottom-btnbox {
          div {
            display: flex;
            justify-content: space-between;
            & + div {
              margin-top: 14px;
            }
            .table-item-btn {
              width: 124px;
              height: 34px;
              line-height: 34px;
              border: 1px solid #1a48db;
              border-radius: 4px;
              font-size: 14px;
              color: #1a48db;
              text-align: center;
              margin: 0;
              cursor: pointer;
              &:active {
                opacity: 0.8;
              }

              &.no-btn {
                border: none;
                color: #5cb87a;
              }

              &.active {
                background: #1a48db1a;
              }
            }
          }
        }
      }
    }
    .pagination {
      padding: 10px;
    }
  }
}
</style>
<style lang="scss">
.cltk {
  .el-collapse-item__header {
    padding-left: 20px;
  }
}
</style>